<template>
    <div class="order">
        <p class="p1">核销员</p>
            <div class="div1">

                <p class="p2">
                    <span class="s2">
                        <span>提货点名称：</span>
                        <el-select @change="selFun" size="small" v-model="value" clearable placeholder="请选择">
                            <el-option
                            v-for="item in options"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </span>
                </p>

            <p class="p3">
                <el-button @click="pickFun" size="small" type="primary" icon="el-icon-plus">添加提货单</el-button>
            </p>

                <el-table
                    v-loading="loading"
                    size="small"
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%">
                    <el-table-column
                    label="ID"
                    width="50">
                    <template slot-scope="scope">{{ scope.row.id }}</template>
                    </el-table-column>

                    <el-table-column
                    prop="nickname"
                    label="微信名称"
                    width="100">
                    </el-table-column>

                    <el-table-column
                    label="头像"
                    width="120">
                        <template slot-scope="scope">
                            <img :src="scope.row.avatar" style="width:40px;height:40px;" alt="">
                        </template>
                    </el-table-column>
                    

                    <el-table-column
                    prop="staff_name"
                    label="客服名称"
                    width="100"
                    >
                    </el-table-column>

                    <el-table-column
                    prop="name"
                    label="所属提货点"
                    width="100"
                    >
                    </el-table-column>

                    <el-table-column
                    prop="add_time"
                    label="添加时间"
                    width="180"
                    >
                    </el-table-column>

                    <el-table-column
                    label="状态"
                    width="100"
                    >
                    <template slot-scope="scope">

                        <div class="ds">
                            <el-tooltip :content="'ID value: ' + scope.row.id" placement="top">
                            <el-switch
                                width="66"
                                v-model="scope.row.status"
                                active-color="#1b80e6"
                                inactive-color="#ccc"
                                :active-value="1"
                                :inactive-value="0"
                                @change="switchFun(scope.row)">
                            </el-switch>
                            </el-tooltip>
                            <span :class="scope.row.status === 1 ? 'ss' : 'sss'">{{ scope.row.is_show === 1 ? '显示' : '隐藏' }}</span>
                        </div>
                        
                        
                        
                    </template>
                    </el-table-column>
                    
                    <el-table-column label="操作" fixed="right" width="140">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="editFun(scope.row)">编辑</el-button>
                        <el-button type="text" size="mini" @click="delFun(scope.row)">删除</el-button>
                    </template>
                    </el-table-column>

                </el-table>

                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                @prev-click="prevFun"
                @next-click='nextFun'
                :current-page="page"
                :page-sizes="[5, 7, 10, 15]"
                :page-size="limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
                </el-pagination>
            </div>

            <!-- 遮罩层 -->
            <addMark :form='form' :dialogFormVisible='dialogFormVisible' v-if="dialogFormVisible" @addVal='addVal' :forms="forms"></addMark>

    </div>
</template>

<script>

import {verifiersel,verifierlist,verifierswitch,verifieraddMark,verifierdel,verifieredit} from '../../api/pickuper/verifier'
import addMark from '../../components/verifier/verifierMark.vue'

export default {
    inject:['reload'],
    components:{
        addMark
    },
    data(){
        return {
            options:[],
            tableData:[],
            multipleSelection: [],
            page:1,
            limit:5,
            total:0,
            loading:true,
            value:'',
            form:{},
            forms:{},
            dialogFormVisible:false
        }
    },
    created(){
        this.verifierlists()
        this.verifiersels()
    },
    methods: {
        //编辑
        editFun(val){
            //console.log(val);
            verifieredit(val.id).then(res => {
                if (res.data.status == 200) {
                    console.log(res.data);
                    this.dialogFormVisible = true;
                    this.form = res.data.data;
                    this.form.id = val.id
                    this.forms = this.form.rules;
                }
            },err => {
                console.log(err);
            })
        },
        //数据删除
        delFun(val){
            this.$confirm('确定要删除核销员吗? 删除核销员后将无法恢复，请谨慎操作！', '删除核销员', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                verifierdel(val.id).then(res => {
                    if (res.data.status === 200) {
                        this.loading = true;
                        this.$message.success(res.data.msg)
                        this.verifierlists()
                    }else{
                        this.$message.error(res.data.msg)
                    }
                },err => {
                    console.log(err);
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        //添加数据回显
        addVal(val){
            this.dialogFormVisible = val;
            this.loading = true;
            this.verifierlists()
        },
        //switch状态
        switchFun(val){
            verifierswitch({id:val.id,status:val.status}).then(res => {
                //console.log(res.data);
                if (res.data.status === 200) {
                    this.loading = true;
                    this.$message.success(res.data.msg)
                    this.verifierlists()
                }else{
                    this.$message.error(res.data.msg)
                }
            },err => {
                console.log(err);
            })
        },
        //数据获取
        verifierlists(){
            verifierlist({page:this.page,limit:this.limit,id:this.value}).then(res => {
                console.log(res.data);
                if (res.data.status === 200) {
                    this.tableData = res.data.data.list
                    this.total = res.data.data.count
                    this.loading = false
                    this.$message.success('数据获取成功！')
                }else{
                    this.$message.error('数据获取失败！')
                }
            },err => {
                console.log(err);
            })
        },
        //添加提货点
        pickFun(){
            this.$message({
                message: 'loading...',
                center: true,
                iconClass:'el-icon-loading',
                duration:1000
            });
            verifieraddMark().then(res => {
                if (res.data.status == 200) {
                    //console.log(res.data);
                    this.form = res.data.data
                    this.forms = this.form.rules;
                    this.dialogFormVisible = this.form.status;
                }
            },err => {
                console.log(err);
            })
        },
        //下拉筛选
        selFun(){
            this.loading = true;
            this.verifierlists()
        },
        //下拉获取
        verifiersels(){
            verifiersel().then(res => {
                //console.log(res.data);
                if (res.data.status == 200) {
                    this.options = res.data.data;
                }
            },err => {
                console.log(err);
            })
        },
        handleSizeChange(val) {
            this.limit = val;
            this.loading = true;
            this.verifierlists()
        },
        handleCurrentChange(val) {
            this.page = val
            this.loading = true;
            this.verifierlists()
        },
        prevFun(val) {
            this.page = val
            this.loading = true;
            this.verifierlists()
        },
        nextFun(val) {
            this.page = val
           this.loading = true;
            this.verifierlists()
        },
    }
}
</script>

<style lang="scss">


.ds{
    width: 100%;
    height: 100%;
    position: relative;
    .ss{
        position: absolute;
        top: 0px;
        left: 26px;
        color: white;
    }
    .sss{
        position: absolute;
        top: 0px;
        left: 26px;
        color: rgb(41, 126, 238);
        font-weight: bold;
    }
}

.order{
    width: 100%;
    height: 100%;
    background: #f5f7f9;
    padding: 0 20px;
    box-sizing: border-box;
}
    .p1{
        width: 100%;
        height: 50px;
        font-size: 18px;
        display: flex;
        align-items: center;
        background: white;
        padding: 0 8px;
        box-sizing: border-box;
    }
    .p2{
        width: 100%;
        height: 50px;
        background: white;
    }

    .div1{
        width: 100%;
        height: 500px;
        margin-top: 20px;
        .p2{
                width: 100%;
                height: 50px;
                display: flex;
                justify-content:start;
                align-items: center;
                padding: 36px 20px;
                box-sizing: border-box;
            }
            .p3{
                width: 100%;
                height: 40px;
                display: flex;
                align-items: center;
                padding: 0 20px;
                box-sizing: border-box;
                background: white;
            }
    }

.div1>.p2>span:nth-child(1){
    width: 36%;
    height: 100%;
    display: flex;
    align-items: center;
    .inps{
        width: 66%;
    }
    span{
        flex: 1;
        display: block;
        height: 100%;
        display: flex;
        white-space: nowrap;
        align-items: center;
    }
}

    .divs{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        p{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    .xiang{
        width: 100%;
        height: 80px;
        background: #f1f1f1;
        display: flex;
        flex-wrap: wrap;
        padding: 0 8px;
        box-sizing: border-box;
        div{
            width: 33.3%;
            height: 40px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
    }
    
    .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }

  .div_one{
      display: flex;
      align-items: center;
  }
  .inps{
      width: 80%;
  }
</style>